<template>
  <div>
    <a-card :bordered="false" style="width: 100%">
      <a-form-model ref="caseInfoForm" :rules="caseInfoRules" :model="caseForm">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item
              label="case信息"
              prop="caseInfo"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 18 }"
              :colon="false"
            >
              <a-input v-model="caseForm.caseInfo" />
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item
              label="投产日期"
              prop="operationDate"
              :label-col="{ span: 6 }"
              :wrapper-col="{ span: 16 }"
              :colon="false"
            >
              <a-date-picker v-model="caseForm.operationDate" format="YYYY-MM-DD" />
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="24">
            <a-form-model-item label="case描述" :label-col="{ span: 2 }" :wrapper-col="{ span: 20 }">
              <a-textarea placeholder="请输入case描述" :rows="3" v-model="caseForm.caseDescription" />
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-card>
  </div>
</template>

<script>
export default {
  name: 'caseEditForm',
  props: { caseInfo: { type: Object } },
  data() {
    return {
      caseForm: this.caseInfo,
      caseInfoRules: {
        caseInfo: [{ required: true, message: 'case信息不能为空', trigger: 'blur' }],
        operationDate: [{ required: true, message: '投产日期不能为空', trigger: 'blur' }]
      }
    }
  },
  watch: {
    caseInfo(newVal) {
      this.caseForm = newVal
    }
  }
}
</script>

<style scoped lang="less"></style>
